<template>
  <div class="">
    <dl class="m-categroy">
      <dt>按拼音首字母选择：</dt>
      <dd
        v-for="item in list"
        :key="item">
        <a :href="'#city-'+item">{{ item }}</a>
      </dd>
    </dl>
    <dl
      v-for="item in block"
      :key="item.title"
      class="m-categroy-section">
      <dt :id="'city-'+item.title">{{ item.title }}</dt>
      <dd>
        <span
          v-for="c in item.city"
          :key="c">{{ c }}</span>
      </dd>
    </dl>
  </div>
</template>

<script>
import pyjs from 'js-pinyin'
export default {
  data(){
    return {
      list:'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
      block:[]
    }
  },
  async mounted(){
    let blocks=[]
    let {city}=await this.$axios.get('/geo/city');
    let p
    let c
    let d={}
    // 将中文的城市名转换成拼音，选取拼音的首字母p，计算p的ASCII值c，
    // 判断对象d中是否已经有属性p，将当前城市push到对应属性数组中，没有则需要先创建一个属于p的空数组。
    city.forEach(item=>{
      p = pyjs.getFullChars(item.name).toLocaleLowerCase().slice(0,1)
      c=p.charCodeAt(0)
      // [{a: [city,city]}]
      if(c>96&&c<123){
        if(!d[p]){
          d[p]=[]
        }
        d[p].push(item.name)
      }
    })
    for(let [k,v] of Object.entries(d)){
      blocks.push({
        title:k.toUpperCase(),
        city:v
      })
    }
    // 排序
    blocks.sort((a,b)=>a.title.charCodeAt(0)-b.title.charCodeAt(0))
    this.block=blocks
  }
}
</script>

<style lang="scss">
  @import "assets/css/changeCity/categroy.scss";
</style>
